/*
SCSS 工具方法
alber 于 2018.5.31
*/

/* 边距*/
@for $i from 1 through 4
{
  .w#{25*$i}{width: (25%*$i);}
  .box#{$i}{flex:$i;}
  .bor-r#{$i*5}{border-radius: $i*.05rem;}

  .padding-#{5*$i}{padding:.05rem*$i;}
  .padding-l#{5*$i}{padding-left:.05rem*$i;}
  .padding-r#{5*$i}{padding-right:.05rem*$i;}
  .padding-t#{5*$i}{padding-top:.05rem*$i;}
  .padding-b#{5*$i}{padding-bottom:.05rem*$i;}
  .padding-lr#{5*$i}{padding:0 .05rem*$i;}
  .padding-tb#{5*$i}{padding:.05rem*$i 0;}

  .margin-#{5*$i}{margin:.05rem*$i;}
  .margin-l#{5*$i}{margin-left:.05rem*$i;}
  .margin-r#{5*$i}{margin-right:.05rem*$i;}
  .margin-t#{5*$i}{margin-top:.05rem*$i;}
  .margin-b#{5*$i}{margin-bottom:.05rem*$i;}
  .margin-lr#{5*$i}{margin:0 .05rem*$i;}
  .margin-tb#{5*$i}{margin:.05rem*$i 0;}
}
/* 字体 8-46 */
@for $i from 1 through 20{
  .font-#{6+$i*2}{font-size:.08+$i*.02rem !important;}
}

@mixin textLine($lineNum: 1) {
  // 显示指定行数的文本
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lineNum;
  -webkit-box-orient: vertical;
}



/*1px边框处理*/

@mixin border($c:#ececec) {
  content: " ";
  position: absolute;
  transform-origin: 0 100%;
  color: $c;
}

@mixin border-b($c:#ececec) {
  @include border($c);
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid $c;
  transform: scaleY(0.5);
}

@mixin border-t($c:#ececec) {
  @include border($c);
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  border-top: 1px solid $c;
  transform: scaleY(0.5);
}

@mixin border-r($c:#ececec) {
  @include border($c);
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid $c;
  transform: scaleX(0.5);
}

@mixin border-l($c:#ececec) {
  @include border($c);
  left: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid $c;
  transform: scaleX(0.5);
}

@function p2r($px) {
  // px to rem 单位转换
  $rem: 16px;
  @return ($px/$rem)+rem;
} 
// 色彩字体
$fontColor: #f95d85;

/*自动隐藏文字*/
.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.ellipsis-1 {@include textLine();}
.ellipsis-2 {@include textLine(2);}

/*1px边框处理*/
.border-b,
.border-t,
.border-l,
.border-r {
  position: relative;
}
.border-b::after {@include border-b();}
.border-t::before {@include border-t();}
.border-r::before {@include border-r();}
.border-l::after {@include border-l();}
